<template>
<div>
    <a-button type="primary" @click="successMsg()">成功提示</a-button>&nbsp;&nbsp;&nbsp;
    <a-button type="primary" @click="errorMsg()">失败提示</a-button>&nbsp;&nbsp;&nbsp;
    <a-button type="primary" @click="notificationMsg()">右上角提示</a-button>&nbsp;&nbsp;&nbsp;
    <a-button type="primary" @click="remindConfirm()">带确定按钮的弹框</a-button>&nbsp;&nbsp;&nbsp;
    <a-button type="primary" @click="remindMsg">带确定取消按钮</a-button>&nbsp;&nbsp;&nbsp;
    <lib-doc :libDocData="libDocData"></lib-doc>
</div>
</template>
<script lang="ts">
import { defineComponent, createVNode } from 'vue'
import { sysMsg } from 'wd-platform-library'
import LibDoc from '@/components/LibDoc.vue'
import { LibDocInterface } from '@/service/LibDocService'
export default defineComponent({
    name: 'i-msg',
    setup () {
        const successMsg = () => {
            sysMsg.successMsg('成功示例')
        }
        const errorMsg = () => {
            sysMsg.errorMsg('失败示例')
        }
        const notificationMsg = () => {
            sysMsg.notificationMsg('右上角提示', () => { alert('123') })
        }
        const remindConfirm = () => {
            sysMsg.remindConfirm('success', {
                title: '成功',
                content: '123123',
                submitCallBack: () => {
                    alert('确定回调')
                }
            })
        }
        const remindMsg = () => {
            sysMsg.remindMsg({
                title: '成功',
                content: createVNode('div', { style: 'font-size:18px' }, '123123'),
                submitCallBack: () => {
                    alert('确定回调')
                },
                cleanCallBack: () => {
                    alert('取消回调')
                }
            })
        }
        const libDocData: LibDocInterface = {
            title: '代码示例',
            docList: [
                {
                    label: '引入组件',
                    type: 'pre',
                    value: `
        import { sysMsg } from 'wd-platform-library'`
                },
                {
                    label: '提示',
                    type: 'pre',
                    value: `
        const successMsg = () => {
            sysMsg.successMsg('成功示例')
        }
        const errorMsg = () => {
            sysMsg.errorMsg('失败示例')
        }
        const notificationMsg = () => {
            //sysMsg.notificationMsg(提示文本,点击弹框回调方法 })
            sysMsg.notificationMsg('右上角提示', () => { alert('123') })
        }`
                },
                {
                    label: '按钮回调',
                    type: 'pre',
                    value: `
        //带有确定按钮的弹框
        const remindConfirm = () => {

            //sysMsg.remindConfirm(类型,options)
            // 类型:info、success、error、warning、confirm
            //options:{
            //    title:"",   // 弹窗标题
            //    icon?:"",    // 弹窗图标
            //    content:"", //弹框文本:内容可以是字符串,也可以是:createVNode('div', { style: 'font-size:18px' }, '123123')
            //    submitCallBack?:()=>{}, //点击确定按钮回调
            //}
            sysMsg.remindConfirm('success', {
                title: '成功',
                content: '123123',
                submitCallBack: () => {
                    alert('确定回调')
                }
            })
        }
        //带有确定和取消按钮的弹框
        const remindMsg = () => {
            //sysMsg.remindConfirm(options)
            //options:{
            //    title:"",   // 弹窗标题
            //    icon?:"",    // 弹窗图标
            //    content:"", //弹框文本:内容可以是字符串,也可以是:createVNode('div', { style: 'font-size:18px' }, '123123')
            //    submitCallBack?:()=>{}, //点击确定按钮回调
            //    cleanCallBack?:()=>{}, //点击取消按钮回调
            //}
            sysMsg.remindMsg({
                title: '成功',
                content: '123123',
                submitCallBack: () => {
                    alert('确定回调')
                },
                cleanCallBack: () => {
                    alert('取消回调')
                }
            })
        }
    `
                }
            ]
        }
        return {
            libDocData,
            remindMsg,
            remindConfirm,
            notificationMsg,
            successMsg,
            errorMsg
        }
    },
    components: {
        LibDoc
    }
})

</script>
